<template>
    <div>
      <section class="my_header">
        <section @click = "gotoback()" class="left">
          <i class="icon_style iconfont icon-arrowleft"></i>
          <button class="back">返回</button>
        </section>
      </section>

      <section class="center">
        <section class="center_header">
          <section class="center_header_left">
            <img :src="$store.state.baseImgUrl+$store.state.commentDetail[$store.state.commentDetail.length-1].commentAvatar" alt="" class="avatar">
          </section>
          <section class="center_header_center">
            <p><span class="nick">{{$store.state.commentDetail[$store.state.commentDetail.length-1].commentNick}}</span></p>
            <p><span class="datetime">{{$store.state.commentDetail[$store.state.commentDetail.length-1].createTime | time}}</span></p>
          </section>
        </section>
        <section class="content">
          <p>{{$store.state.commentDetail[$store.state.commentDetail.length-1].content}}</p>
        </section>
      </section>

      <section class="comment">
        <ul class="post_list_ul" v-infinite-scroll="loadMore"
            infinite-scroll-disabled="loading"
            infinite-scroll-distance="10">
          <li class="post_list_li" v-for="item in commentList" :key="item.id" >
            <section class="li_header">
              <section class="li_header_left">
                <img :src="$store.state.baseImgUrl+item.commentAvatar" alt="" class="avatar">
              </section>
              <section class="li_header_center" @click="showArticleDetail(item)">
                <span class="nick">{{item.commentNick}}</span>
              </section>
              <section class="li_header_right">
                <span class="datetime">{{item.createTime | time}}</span>
              </section>
              <button class="btn" @click="replyComment(item)">{{item.commentedCount}}回复</button>
            </section>

            <section class="li_center" @click="replyComment(item)">
              <section  class="li_center_container">
                <span class="container">
                  <p>{{item.content}}</p>
                </span>
              </section>
            </section>
          </li>

        </ul>
      </section>


      <section class="bottom_nav">
        <section class="content">
          <textarea  id="content_input" rows="1" placeholder="回复..." style="" @keyup="autoResize()" v-model="content" ></textarea>
          <button class="btn" @click="comment()">发布</button>
        </section>
      </section>

    </div>
</template>

<script>
  import {mapState, mapMutations} from 'vuex'
  import { Toast } from 'mint-ui'
    export default {

      data() {
        return {
          editor: null,
          commentList:[],
          offset: 0,
          content: "",
          loading: false,
          showLoading: true,
          preventRepeat: false,
          back: true,
        }
      },
      beforeRouteLeave(to, from, next) {
        // 如果跳转到详情页面，则记录关键数据
        // 方便从详情页面返回到该页面的时候继续加载之前位置的数据
        if (this.back){
          this.popComment();
        }
        next();
      },

        components: {},
        methods:{
          ...mapMutations([
            'SAVE_COMMENT'
          ]),
          popComment(){
            let commentDetail = this.$store.state.commentDetail;
            commentDetail.pop();
            this.SAVE_COMMENT(commentDetail);
          },
          gotoback(){
            this.preventRepeat = false;
            this.$router.go(-1)
          },

          async loadMore(){
            console.log("load....");
            this.loading = true;

            //获取信息
            let res = null;
            let url = '/v1/comment?articleId=' + this.$store.state.articleDetail.id
              + '&commentParentId=' + this.$store.state.commentDetail[this.$store.state.commentDetail.length-1].id
              + '&start=' + this.offset
              + '&length=' + this.$store.state.length

            await this.axios.get(url)
              .then(response => {
                res = response.data;
              })

            if (res.success){

            }else{
              let instance = Toast({message: '网络连接失败', className: 'toast'});
              setTimeout(() => {
                instance.close();
                return;
              }, 2000);
            }
            this.offset += res.result.length;
            this.commentList = [...this.commentList, ...res.result];
            if (res.result.length > 0){
              this.loading = false;
            }

            if (res.result.length < this.$store.state.length) {
              this.showLoading = false;
              return;
            }
          },

          replyComment(item){
            console.log(this.$store.state.commentDetail);
            console.log(this.$store.state.commentDetail === null);
            let commentDetail = this.$store.state.commentDetail;
            commentDetail.push(item);
            this.SAVE_COMMENT(commentDetail);
            this.preventRepeat = false;
            this.back = false;
            this.$router.push('/comment');

          },

          async comment(){
            if (this.content === ""){
              let instance = Toast({message: '评论信息不能为空', className: 'toast'});
              setTimeout(() => {
                instance.close();
              }, 2000);
              return ;
            }
            //获取信息
            let res = null;
            let url = '/v1/comment'
            let param = {
              commentId: this.$store.state.userInfo.userId,
              commentNick: this.$store.state.userInfo.nick,
              commentAvatar: this.$store.state.userInfo.avatar,
              content: this.content,
              articleId: this.$store.state.articleDetail.id,
              commentParentId:  this.$store.state.commentDetail[this.$store.state.commentDetail.length-1].id,
              commentParentUserId: this.$store.state.commentDetail[this.$store.state.commentDetail.length-1].commentId,
              commentParentUserNick: this.$store.state.commentDetail[this.$store.state.commentDetail.length-1].commentNick,
              commentedCount:0
            }
            await this.axios.post(url, param)
              .then(response => {
                res = response.data;
              })
            if (res.success){
              param['createTime'] = new Date().getTime();
              this.commentList.unshift(param);
              this.content = "";
//          window.location.reload();
              let instance = Toast({message: '评论成功', className: 'toast'});
              setTimeout(() => {
                instance.close();
              }, 2000);

            }else{
              let instance = Toast({message: '网络链接失败', className: 'toast'});
              setTimeout(() => {
                instance.close();
              }, 2000);
            }

          },
          autoResize() {
            let minRows = 1;
            let maxRows = 6;
            let t = document.getElementById("content_input");
            if (t.scrollTop == 0) t.scrollTop = 1;
            while (t.scrollTop == 0) {
              if (t.rows > minRows)
                t.rows--;
              else
                break;
              t.scrollTop = 1;
              if (t.rows < maxRows)
                t.style.overflowY = "hidden";
              if (t.scrollTop > 0) {
                t.rows++;
                break;
              }
            }
            while (t.scrollTop > 0) {
              if (t.rows < maxRows) {
                t.rows++;
                if (t.scrollTop == 0) t.scrollTop = 1;
              }
              else {
                t.style.overflowY = "auto";
                break;
              }
            }
          },
        }
    }
</script>

<style lang="scss">
  .ivu-input{
    resize: none;
  }
</style>

<style lang="scss" scoped>
  @import '../../style/mixin';

  .bottom_nav{
    background-color: #fff;
    position: fixed;
    z-index: 100;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    box-shadow: 0 -0.026667rem 0.053333rem rgba(0,0,0,.1);

    .content{
      width: 16rem;
      display: flex;



      #content_input{
        background:transparent;
        overflow-y:hidden;
        resize:none;
        flex: 10;
        font-size: 0.6rem;
        border: solid 1px #33CCFF;
        text-indent: 0.5rem;
      }
      .btn{
        flex: 2;
        background-color: #33CCFF;
        color: #FFFFFF;
        font-weight: bold;
      }
    }
  }

  .my_header{
    background-color: #33CCFF;
    height: 1.5rem;
    padding-top: 0.2rem;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;

    .left{
      margin-left: 0.5rem;
      .icon_style{
        font-size: 0.6rem;
        font-weight: bold;
      }
      .back{
        background-color: transparent;
        font-size: 0.65rem;
        margin: 0;
      }
    }
  }

  .center{
    padding-top: 1.5rem;
    .center_header{
      @include wh(100%, 3rem);
      border-bottom: solid 1px #e3e8ee;
      display: flex;

      .center_header_left{
        display: inline-block;
        margin: 0.1rem 0.5rem;

        .avatar{
          @include wh(2.2rem, 2.2rem);
          @include borderRadius(1.1rem);
        }
      }

      .center_header_center{
        flex-direction: column;
        align-items: center;
        display: inline-block;
        margin: auto 0.2rem;
        .nick{
          margin: auto 0;
          font-size: 0.4rem;
          font-weight: bold;
        }
        .datetime{
          margin: auto 0;
          font-size: 0.3rem;
          font-weight: bold;
        }

      }

      .btn{
        width: 3rem;
        height: 0.8rem;
        background-color: #33CCFF;
        color: #FFFFFF;
        @include borderRadius(1.5rem);
        position: absolute;
        right: 1rem;
        margin-top: 0.2rem;
      }
    }

    .content{
      background-color: #FFFFFF;
      padding: 0.3rem;
      border-bottom: solid 1px #e3e8ee;
      padding: 0.5rem 0;

      p{
        margin-left: 0.5rem;
      }
    }
  }


  .post_list_ul{
    padding-bottom: 2rem;
    overflow: hidden;

    .post_list_li{
      border: solid 1px #d7dde4;
      @include borderRadius(0.1rem);
      border-bottom: solid 10px #eaeaea;


      /*单个文章节点头部 开始*/
      .li_header{
        @include wh(100%, 1.6rem);
        border-bottom: solid 1px #e3e8ee;
        display: flex;

        .li_header_left{
          display: inline-block;
          margin: 0rem 0.5rem;

          .avatar{
            @include wh(1.3rem, 1.3rem);
            @include borderRadius(0.65rem);
            margin-top: 0.15rem;
          }
        }

        .li_header_center{
          flex-direction: column;
          align-items: center;
          display: inline-block;
          margin: auto 0.2rem;
          .nick{
            margin: auto 0;
            font-size: 0.4rem;
            font-weight: bold;
          }

        }

        .li_header_right{
          flex-direction: column;
          align-items: center;
          display: inline-block;
          margin: auto 0.2rem;

          .datetime{
            margin: auto 0;
            font-size: 0.3rem;
            font-weight: bold;
          }
        }

        .btn{
          width: 3rem;
          height: 0.8rem;
          background-color: #33CCFF;
          color: #FFFFFF;
          @include borderRadius(1.5rem);
          position: absolute;
          right: 1rem;
          margin-top: 0.2rem;
        }
      }


      /* 单个节点中部，内容部分  开始*/
      .li_center{
        padding: 0.2rem 0.5rem;

        .li_center_container{
          background-color: #FFFFFF;
          padding: 0.3rem;

          .container{
            p{
              margin-left: 0.5rem;
              width:100%;/*要显示文字的宽度*/
              word-break: break-all;
              display: -webkit-box;
              -webkit-line-clamp: 6;  /*限制在一个块元素显示的文本的行数*/
              -webkit-box-orient: vertical;
              overflow: hidden;
            }

          }

        }
      }
    }
  }
</style>
